import React from 'react'
import shallow from 'zustand/shallow'
import { IconToRightAll, IconToRight, IconToLeft, IconToLeftAll } from '../../components/Icons'
import { addAllSelectedToRight, addSelectedToRight } from '../../store.trans'
import { useSelectedStore } from '../selected/store'
import { StyledWrap } from './style'

function Operate() {
	const { removeSelected, removeAllSelected } = useSelectedStore(
		(state) => ({
			removeSelected: state.removeSelected,
			removeAllSelected: state.removeAllSelected,
		}),
		shallow
	)
	return (
		<StyledWrap>
			<div className="opt">
				<IconToRightAll onClick={() => addAllSelectedToRight()} />
				<IconToRight onClick={() => addSelectedToRight()} />
				<IconToLeft onClick={() => removeSelected()} />
				<IconToLeftAll onClick={() => removeAllSelected()} />
			</div>
		</StyledWrap>
	)
}
export default Operate
